<template>
  <van-cell v-for="item in orderlist" :key="item.id">
    <template #default>
      <!-- 顶部 -->
      <div class="head">
        <div class="left">
          <img class="doctorPhoto" :src="item.docInfo.avatar" alt="" />
          <div>{{ item.docInfo.name }}</div>
        </div>
        <div class="right" :style="{color: colors[item.statusValue] || '#848484'}">{{ item.statusValue }}</div>
      </div>
      <!-- 中间主要内容 -->
      <div
        class="main"
        @click="$router.push({ path: `/my/consult/${item.id}`, query: item })"
      >
        <div class="details">
          <span class="lable">病情描述</span>
          <span class="detail">{{ item.illnessDesc }}</span>
        </div>
        <div class="details">
          <span class="lable">价格</span>
          <span class="detail">￥{{ item.payment.toFixed(2) }}</span>
        </div>
        <div class="details">
          <span class="lable">创建时间</span>
          <span>{{ item.createTime }}</span>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="footer" v-if="item.status === 1">
        <PendPay @cancelOrder="onCancelOrder(item.id)" :order="item"></PendPay>
      </div>
      <div class="footer" v-else-if="item.status === 2">
        <PenDing @cancelOrder="onCancelOrder(item.id)" :order="item"></PenDing>
      </div>
      <div class="footer" v-else-if="item.status === 3">
        <PenDing @cancelOrder="onCancelOrder(item.id)" :order="item"></PenDing>
      </div>
      <div class="footer" v-else-if="item.status === 4">
        <Accomplish :order="item" @onDelOrder="onDelOrder">
          <van-button class="next" round plain type="success"
            >去评价</van-button
          >
        </Accomplish>
      </div>
      <div class="footer" v-else>
        <CancelButton @delOrder="onDelOrder(item.id)"></CancelButton>
      </div>
    </template>
  </van-cell>
</template>

<script setup>
import { delOrder, cancelOrder } from '@/api'
import { showSuccessToast } from 'vant'
import { defineEmits, defineProps, watch } from 'vue'
import Accomplish from './accomPlish.vue'
import PenDing from './penDing.vue'
import CancelButton from './cancelButton.vue'
import PendPay from './pendPay.vue'

const emits = defineEmits(['onDelOrder', 'onCancelOrder'])
const props = defineProps({
  orderlist: {
    type: Array,
    default: () => []
  }
})

// 判断待支付时间是否结束
watch(props.orderlist, (newValue) => {
  newValue.forEach(async item => {
    // 当前时间戳
    const currentTime = +new Date()
    // 创建订单时间戳
    const createTimes = +new Date(item.createTime)
    // 倒计时秒数
    const time = 900 - (currentTime - createTimes) / 1000
    // 如果倒计时结束 取消订单
    if (time < 0 && item.status === 1) {
      await cancelOrder(item.id)
      emits('onCancelOrder', item.id)
    }
  })
})

// 顶部右侧文字颜色
const colors = {
  待支付: '#f2994a',
  咨询中: '#16c2a3'
}

// 删除订单
const onDelOrder = async (id) => {
  await delOrder(id)
  emits('onDelOrder', id)
  showSuccessToast('删除成功')
}

// 取消订单
const onCancelOrder = async (id) => {
  await cancelOrder(id)
  emits('onCancelOrder', id)
  showSuccessToast('取消成功')
}
</script>

<style lang="scss" scoped>
::v-deep .footer {
  padding: 0 30px 24px;
  .van-button--round {
    height: 60px;
    font-size: 24px;
  }
  .out {
    border: 0;
    background-color: #f6f7f9;
    color: #6f6f6f;
  }
  .next {
    margin-left: 20px;
    border: 1px solid #16c2a3;
    color: #16c2a3;
  }
  .van-popover__wrapper {
    float: left;
    line-height: 66px;
    font-size: 26px;
  }
}
</style>
